<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery3.3.1.min.js"></script>
    <script src="layui/layui.all.js"></script>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="layui/css/layui.mobile.css"/>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">

    $(document).ready(function () {

        $("#all").on('click', function() {
            $("tbody input:checkbox").prop("checked", $(this).prop('checked'));
        })
        $("tbody input:checkbox").on('click', function() {
            //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
            if($("tbody input:checkbox").length === $("tbody input:checked").length) {
                $("#all").prop("checked", true);
            } else {
                $("#all").prop("checked", false);
            }
        })



    });

    function delAll () {

        var userInfoList = new Array();
        $('input[name="rid"]:checked').each(function () {
            userInfoList.push($(this).val());//向数组中添加元素

        });

        $.post("/delrecharge",{"listid":userInfoList},function(data){
            if (data=="0"){
                $('input[name="rid"]:checked').parent().parent().remove();
            } else {
                alert("删除失败！！");
            }
        })
    }

/*增加*/
function showadd(){
    //异步查询出数据,当ajax请求的网址响应返回后，会自动回调匿名函数

    //负责显示窗口
    var	layer = layui.layer;
    var othis = $(this);
    var type = othis.data('type')
    var text = othis.text();
    layer.open({
        type: 1
        ,skin:'layui-layer-molv'
        ,offset:type
        ,id: 'layerDemo'+type //防止重复弹出
        ,content: $("#form")
        ,btnAlign: 'c' //按钮居中
        ,shade: 0.5 //不显示遮罩
        ,title:"增加充值类型"
        ,area:['600px','400px']
        ,yes: function(index, layero){
            layer.close(index);
        },
        end:function(){
            $("#form").hide();
        }
    });
}


    /*修改*/
    function showEdit(id){

        //异步查询出数据,当ajax请求的网址响应返回后，会自动回调匿名函数
        $.post("/rechargebyid",{"id":id},function (data) {
            if(data.id!=null){
                console.log(data);
                $("input[name='name']").val(data.name);
                $("input[name='rmb']").val(data.rmb);
                $("input[name='golds']").val(data.golds);
                $("input[name='id']").val(data.id);
            }
        },"json");
        //负责显示窗口
        var	layer = layui.layer;
        var othis = $(this);
        var type = othis.data('type');
        var text = othis.text();
        layer.open({
            area: ['600px', '400px']
            ,skin:'layui-layer-molv'
            ,type: 1
            ,offset: type
            ,id: 'layerDemo'+type //防止重复弹出
            ,content: $("#form")
            ,btnAlign: 'c' //按钮居中
            ,shade: 0.5 //不显示遮罩
            ,title:"充值选项修改"
            ,yes: function(index, layero){
                layer.close(index);
            },
            end:function(){
                $("#form").hide();
            }
        });
    }
</script>
</head>
<body>
	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">充值记录管理</a></li>
    </ul>
    </div>
    
    <div class="rightinfo">
    
    <div class="tools">
    	<ul class="toolbar">
        <li id="delect" onclick="delAll()"><span><img src="images/t03.png"/></span>删除</li>
        <li id="add" onclick="showadd()"><span><img src="images/t01.png" /></span>新增</li>
        </ul>
        <ul class="toolbar1">
        <li><span><img src="images/t05.png" /></span>设置</li>
        </ul>
    
    </div>
    
    
    <table class="tablelist">
    	<thead>
    		<tr>
	        <th><input  type="checkbox" value="" id="all"/></th>
	        <th>充值选项名称</th>
	        <th>充值价格</th>
	        <th>充值金币</th>
	        <th>更新日期</th>
	        <th>操作</th>
     		</tr>
     </thead>
     <tbody id="list">
     <c:forEach items="${list}" var="l">
       <tr>
        <td><input type="checkbox" name="rid" value="${l.id}" /></td>
        <td>${l.name}</td>
        <td>${l.rmb}</td>
        <td>${l.golds}</td>
        <td>${l.time}</td>
        <td><a onclick="showEdit(${l.id})">修改</a></td>
       </tr>
     </c:forEach>
     </tbody>
    </table>

    </div>

    </div>
    <div id="form" style="padding:20px 20px;display: none;">
        <form class="layui-form" id="form1" action="/addrecharge" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">选项名称:</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入选项名称" autocomplete="off" class="layui-input" style="width: 190px">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">充值价格:</label>
                <div class="layui-input-block">
                    <input type="text" name="rmb" required  lay-verify="required" placeholder="请输入充值价格" autocomplete="off" class="layui-input" style="width: 190px">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">充值金币:</label>
                <div class="layui-input-block">
                    <input type="text" name="golds" required  lay-verify="required" placeholder="请输入充值金币" autocomplete="off" class="layui-input" style="width: 190px">
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="hidden" name="id"/>
                    <input class="layui-btn"  value="提交" style="background-color:#4098CA" type="submit"/>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;
        });
    </script>


    

    </div>


</body>

</html>
